import React, { useEffect } from "react";
import { useCallback } from "react";
import { useMemo } from "react";
import { useState } from "react";
import Count from "./Count";
import Goods from "./Goods";

export default function TestShow() {
  //声明状态
  let [type, setType] = useState("boy");
  let [count, setCount] = useState(0);
  let [goods] = useState([
    {
      remote_img:
        "http://img14.360buyimg.com/n7/jfs/t1/190177/5/20205/91340/612dc9d1Ea57ded86/53a5e2d24dabf32d.jpg",
      title:
        "一加 OnePlus 9 Pro 5G旗舰2K+120Hz 柔性屏12GB+256GB 绿洲 骁龙888 65W快充 哈苏专业模式 超广角拍照手机",
      price: "5499.00",
      shop: "一加手机京东自营官方旗舰店",
      url: "https://item.jd.com/100019141914.html",
      isZY: true,
      img: "/images/goods/53a5e2d24dabf32d.jpg",
      id: 1,
    },
    {
      remote_img:
        "http://img13.360buyimg.com/n7/jfs/t1/189261/39/3773/121751/60a269ecE4cd8a070/df2735c6ee1a895a.jpg",
      title:
        "荣耀Play5T 22.5W超级快充 5000mAh大电池 6.5英寸护眼屏 全网通8GB+128GB极光蓝",
      price: "1189.00",
      shop: "荣耀京东自营旗舰店",
      url: "https://item.jd.com/100021830458.html",
      isZY: true,
      img: "/images/goods/df2735c6ee1a895a.jpg",
      id: 2,
    },
    {
      remote_img:
        "http://img13.360buyimg.com/n7/jfs/t1/198525/38/8395/144282/6140705bE7dd39929/e805d8c02b7e1f3b.jpg",
      title:
        "Redmi Note 9 4G 6000mAh大电池 骁龙662处理器  18W快充 羽墨黑 6GB+128GB 智能手机 小米 红米",
      price: "999.00",
      shop: "小米京东自营旗舰店",
      url: "https://item.jd.com/100016784108.html",
      isZY: false,
      img: "/images/goods/e805d8c02b7e1f3b.jpg",
      id: 3,
    },
    {
      remote_img:
        "http://img11.360buyimg.com/n7/jfs/t1/186256/6/554/135561/6082904aE2a61d056/c921c551039621d0.jpg",
      title:
        "荣耀畅玩20 5000mAh超大电池续航 6.5英寸大屏  莱茵护眼 4GB+128GB 极光蓝 双卡双待 全网通",
      price: "889.00",
      shop: "荣耀京东自营旗舰店",
      url: "https://item.jd.com/100011186161.html",
      isZY: false,
      img: "/images/goods/c921c551039621d0.jpg",
      id: 4,
    },
    {
      remote_img:
        "http://img13.360buyimg.com/n7/jfs/t1/200673/15/4432/202879/612ddc90Ec08afda5/9ef1faa1babfcf31.jpg",
      title:
        "Redmi 9A 5000mAh大电量 1300万AI相机 八核处理器 人脸解锁 4GB+64GB 晴空蓝 游戏智能手机 小米 红米",
      price: "599.00",
      shop: "小米京东自营旗舰店",
      url: "https://item.jd.com/100014348478.html",
      isZY: true,
      img: "/images/goods/9ef1faa1babfcf31.jpg",
      id: 5,
    }
  ]);

  //useEffect 钩子
  useEffect(() => {
    //修改 body 的背景颜色
    document.body.style.background = type === "boy" ? "#2d629e" : "#c03770";
  }, [type]);

  //处理 goods   useMemo 缓存函数的返回结果. 用于缓存复杂运算的结果.
  let newGoods = useMemo(() => {
    return goods.map(item => {
      //处理标题
      item.title = item.title.slice(0, 20);
      //返回 item
      return item;
    });
  }, [goods]);

  //声明一个函数   useCallback 作用: 缓存一个函数 
  let incre = useCallback(() => {
    setCount(count + 1);
  }, [count]); //

  return (
    <div>
      <button
        onClick={() => {
          setType("boy");
        }}
      >
        男生
      </button>
      &nbsp;&nbsp;
      <button
        onClick={() => {
          setType("girl");
        }}
      >
        女生
      </button>
      <hr />
      <Count count={count} incre={incre} />
      <hr />
      <Goods goods={newGoods} />
    </div>
  );
}
